<!-- components/VoiceInput/VoiceInput.vue -->
<template>
  <view class="voice-input" @click="handleClick">
    <img
      style="width: 60rpx; height: 30rpx; margin-right: 10rpx"
      src="/static/images/icon-11.png"
      alt="语音输入图标"
    />
    <text>{{ displayText }}</text>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const props = defineProps({
  // 是否正在录音
  isRecording: {
    type: Boolean,
    default: false
  },
  // 语音识别临时文本
  tempText: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['click'])

const displayText = computed(() => {
  if (props.isRecording) return '正在聆听...'
  if (props.tempText) return props.tempText
  return '点击语音输入'
})

const handleClick = () => {
  emit('click')
}
</script>

<style lang="scss" scoped>
.voice-input {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80rpx;
  background: #ffffff;
  border-radius: 40rpx;
  border: 1rpx solid #3b7cff;
  font-size: 30rpx;
  color: #3b7cff;
  transition: all 0.3s;

  &:active {
    opacity: 0.8;
    transform: scale(0.98);
  }

  text {
    margin-left: 8rpx;
  }
}
</style>